<script setup lang="ts">
import $api from "@/api/index";
import Model from "@/components/common/Model.vue";
import { ref, watch } from "vue";
import { useScroll } from "@vueuse/core";
import useRem from "@/hooks/useRem";
interface Props {
  visible?: boolean;
  value?: Array<any>;
}
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  value: () => {
    return [];
  }
});
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "change", val: any): void;
}>();
const model = ref(null),
  provinces = ref([]),
  citys = ref([]),
  areas = ref([]),
  t1 = ref(null),
  t2 = ref(null),
  t3 = ref(null);
const { data: tree } = $api.city.getTree();
watch(tree, (_tree: Array<any>) => {
  provinces.value = _tree;
  //init()
});
function init() {
  const { rem2px } = useRem();
  const itemHeight = rem2px(7),
    clientHeight = rem2px(32.25),
    scrollY =
      4 * itemHeight.value - clientHeight.value / 2 + itemHeight.value / 2;
  let _y1 = scrollY,
    _y2 = scrollY,
    _y3 = scrollY;
  const _idx1 = provinces.value.findIndex(val => val.code == props.value[0]);
  idx1.value = _idx1 > 0 ? _idx1 : 0;
  changeProvince(provinces.value[idx1.value]);
  let offsetY1 = _y1 + idx1.value * itemHeight.value;
  let offsetY2 = _y2 + idx2.value * itemHeight.value;
  let offsetY3 = _y2 + idx3.value * itemHeight.value;
  const { y: y1 } = useScroll(t1, {
    onStop(e) {
      _y1 ??= y1.value;
      const _idx1 = (y1.value - _y1) / itemHeight.value;
      idx1.value = _idx1 > 0 ? Math.round(_idx1) : 0;
      console.log(_y1, idx1.value, y1.value, itemHeight.value);
      changeProvince(provinces.value[idx1.value]);
    }
  });
  const { y: y2 } = useScroll(t2, {
    onStop(e) {
      _y2 ??= y2.value;
      const _idx2 = (y2.value - _y2) / itemHeight.value;
      idx2.value = _idx2 > 0 ? Math.round(_idx2) : 0;
      changeCity(citys.value[idx2.value]);
    }
  });
  const { y: y3 } = useScroll(t3, {
    onStop(e) {
      _y3 ??= y3.value;
      const _idx3 = (y3.value - _y3) / itemHeight.value;
      idx3.value = _idx3 > 0 ? Math.round(_idx3) : 0;
    }
  });
  watch(t1, _t1 => {
    _t1?.scroll(0, offsetY1);
  });
  watch(t2, _t2 => {
    _t2?.scroll(0, offsetY2);
  });
  watch(t3, _t3 => {
    _t3?.scroll(0, offsetY3);
  });
}
//选择省份
function changeProvince(item) {
  citys.value = item.children;
  const _idx2 = citys.value.findIndex(val => val.code == props.value[1]);
  idx2.value = _idx2 > 0 ? _idx2 : 0;
  changeCity(citys.value[idx2.value]);
}
//选择市
function changeCity(item) {
  areas.value = item.children;
  const _idx3 = citys.value.findIndex(val => val.code == props.value[2]);
  idx3.value = _idx3 > 0 ? _idx3 : 0;
}
//取消
function cancel() {
  model.value.hideModel();
  emit("update:visible", false);
}
//确认
function confirm() {
  const province = {
    name: provinces.value[idx1.value].name,
    value: provinces.value[idx1.value].code
  };
  const city = {
    name: citys.value[idx2.value].name,
    value: citys.value[idx2.value].code
  };
  const area = {
    name: areas.value[idx3.value].name,
    value: areas.value[idx3.value].code
  };
  emit("change", [province, city, area]);
  emit("update:visible", false);
}
watch(props, _props => {
  if (_props.visible) {
    model.value.showModel();
  } else {
    model.value.hideModel();
  }
  if (_props.value && provinces.value.length > 0) {
    init();
  }
});
const idx1 = ref(0),
  idx2 = ref(0),
  idx3 = ref(0);
</script>

<template>
  <Model ref="model" mode="bottom" @hide="emit('update:visible', false)">
    <div w:w="screen" w:h="150" w:flex="~ col nowrap" w:p="4" w:bg="white">
      <div w:flex="~ nowrap" w:justify="between" w:text="3xl" w:m="2">
        <div w:text="gray-400" @click="cancel">取消</div>
        <div w:text="blue-600" @click="confirm">确认</div>
      </div>
      <div
        w:flex="~ nowrap 1"
        w:text="4xl gray-400"
        w:overflow="y-scroll"
        w:pos="relative"
        w:h="129"
      >
        <div
          ref="t1"
          class="snap snap-y snap-mandatory scrollbar-hide"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item, idx) in 4" :key="'start-' + idx" w:h="28">
            &nbsp;
          </div>
          <div
            v-for="(item, idx) in provinces"
            :key="item._id"
            class="snap-center"
            :class="[idx1 == idx ? 'font-bold text-dark-800' : '']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
            @click="changeProvince(item)"
          >
            {{ item.name }}
          </div>
          <div v-for="(item, idx) in 4" :key="'end-' + idx" w:h="28">
            &nbsp;
          </div>
        </div>
        <div
          ref="t2"
          class="snap snap-y snap-mandatory scrollbar-hide"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item, idx) in 4" :key="'start-' + idx" w:h="28">
            &nbsp;
          </div>
          <div
            v-for="(item, idx) in citys"
            :key="item._id"
            class="snap-center"
            :class="[idx2 == idx ? 'font-bold text-dark-800' : '']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
            @click="changeCity(item)"
          >
            {{ item.name }}
          </div>
          <div v-for="(item, idx) in 4" :key="'end-' + idx" w:h="28">
            &nbsp;
          </div>
        </div>
        <div
          ref="t3"
          class="snap snap-y snap-mandatory scrollbar-hide"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item, idx) in 4" :key="'start-' + idx" w:h="28">
            &nbsp;
          </div>
          <div
            v-for="(item, idx) in areas"
            :key="item._id"
            class="snap-center"
            :class="[idx3 == idx ? 'font-bold text-dark-800' : '']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
          >
            {{ item.name }}
          </div>
          <div v-for="(item, idx) in 4" :key="'end-' + idx" w:h="28">
            &nbsp;
          </div>
        </div>
        <div
          w:pos="absolute top-0 left-0"
          w:w="full"
          w:h="full"
          w:flex="~ nowrap"
          w:align="items-center"
          w:pointer="none"
        >
          <div w:w="full" w:border="y-2 solid gray-400" w:h="28">&nbsp;</div>
        </div>
      </div>
    </div>
  </Model>
</template>

<style scoped lang="scss"></style>
